{% extends "heytea-order-base.html" %}

{% block main %}

  <!-- 主内容区 -->
  <main class="container mx-auto px-4 pt-24 md:pt-28 pb-20">
    <!-- 门店选择条 -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <i class="fa fa-map-marker text-heytea-green mr-2"></i>
          <span class="font-medium">当前门店：喜茶(上海新天地店)</span>
        </div>
        <button class="text-heytea-green text-sm hover:underline flex items-center">
          切换 <i class="fa fa-angle-right ml-1"></i>
        </button>
      </div>
      <div class="text-sm text-gray-500 mt-1">
        <span>预计取茶时间：</span>
        <span class="text-gray-700 font-medium">15-25分钟</span>
      </div>
    </div>
    
    <!-- 分类和商品列表 -->
    <div class="flex flex-col md:flex-row gap-6">
      <!-- 左侧分类 -->
      <div class="md:w-1/5 lg:w-1/6">
        <div class="bg-white rounded-lg shadow-sm p-3 sticky top-24">
          <h3 class="text-lg font-semibold mb-3 px-2">饮品分类</h3>
          <ul class="space-y-1" id="categoryList">
            {% for category in categories %}
            <li>
              <button class="category-item w-full text-left px-2 py-3 rounded-md transition-all hover:bg-heytea-lightGreen" data-category="all">
                {{ category }}
              </button>
            </li>
            {% endfor %}
          </ul>
        </div>
      </div>
      
      <!-- 右侧商品列表 -->
      <div class="md:w-4/5 lg:w-5/6">
        <!-- 筛选和排序 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex flex-wrap items-center justify-between gap-4">
            <div class="flex flex-wrap gap-2">
              <button class="px-3 py-1 bg-heytea-lightGreen text-heytea-green rounded-full text-sm">
                新品
              </button>
              <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200 transition-colors">
                热饮
              </button>
              <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200 transition-colors">
                冰饮
              </button>
              <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200 transition-colors">
                不含茶
              </button>
              <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200 transition-colors">
                低卡
              </button>
            </div>
            <div class="relative">
              <select class="appearance-none bg-gray-100 border-none rounded-lg px-3 py-2 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-heytea-green/30">
                <option>默认排序</option>
                <option>销量优先</option>
                <option>价格从低到高</option>
                <option>价格从高到低</option>
              </select>
              <i class="fa fa-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none text-xs"></i>
            </div>
          </div>
        </div>
        
        <!-- 商品网格 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="productGrid">
          <!-- 商品1 -->
          <div class="product-card bg-white rounded-xl shadow-sm overflow-hidden card-hover" data-category="milk">
            <div class="relative">
              <img src="https://picsum.photos/seed/heymilk1/400/300" alt="喜茶经典奶茶" class="w-full h-48 object-cover">
              <span class="absolute top-2 left-2 bg-heytea-green text-white text-xs px-2 py-1 rounded-md">招牌</span>
              <button class="add-to-cart absolute bottom-2 right-2 bg-heytea-green text-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-heytea-darkGreen transition-colors" data-id="1" data-name="经典珍珠奶茶" data-price="18" data-img="https://picsum.photos/seed/heymilk1/400/300">
                <i class="fa fa-plus"></i>
              </button>
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-1">经典珍珠奶茶</h3>
              <p class="text-gray-500 text-sm mb-2 line-clamp-2">精选阿萨姆红茶，搭配香醇鲜奶，加入Q弹珍珠，口感丰富。</p>
              <div class="flex items-center justify-between">
                <span class="text-heytea-green font-bold">¥18</span>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400 text-xs"></i>
                  <span class="text-gray-500 text-xs ml-1">4.8 (1200+)</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 商品2 -->
          <div class="product-card bg-white rounded-xl shadow-sm overflow-hidden card-hover" data-category="fruit">
            <div class="relative">
              <img src="https://picsum.photos/seed/heyfruit1/400/300" alt="多肉葡萄" class="w-full h-48 object-cover">
              <span class="absolute top-2 left-2 bg-heytea-orange text-white text-xs px-2 py-1 rounded-md">新品</span>
              <button class="add-to-cart absolute bottom-2 right-2 bg-heytea-green text-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-heytea-darkGreen transition-colors" data-id="2" data-name="多肉葡萄" data-price="25" data-img="https://picsum.photos/seed/heyfruit1/400/300">
                <i class="fa fa-plus"></i>
              </button>
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-1">多肉葡萄</h3>
              <p class="text-gray-500 text-sm mb-2 line-clamp-2">新鲜葡萄果肉与清香绿茶融合，顶部覆盖绵密芝士奶盖。</p>
              <div class="flex items-center justify-between">
                <span class="text-heytea-green font-bold">¥25</span>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400 text-xs"></i>
                  <span class="text-gray-500 text-xs ml-1">4.9 (2500+)</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 商品3 -->
          <div class="product-card bg-white rounded-xl shadow-sm overflow-hidden card-hover" data-category="cheese">
            <div class="relative">
              <img src="https://picsum.photos/seed/heycheese1/400/300" alt="芝士莓莓" class="w-full h-48 object-cover">
              <button class="add-to-cart absolute bottom-2 right-2 bg-heytea-green text-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-heytea-darkGreen transition-colors" data-id="3" data-name="芝士莓莓" data-price="28" data-img="https://picsum.photos/seed/heycheese1/400/300">
                <i class="fa fa-plus"></i>
              </button>
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-1">芝士莓莓</h3>
              <p class="text-gray-500 text-sm mb-2 line-clamp-2">草莓与蓝莓混合果泥，搭配清幽绿茶，顶部是咸香芝士奶盖。</p>
              <div class="flex items-center justify-between">
                <span class="text-heytea-green font-bold">¥28</span>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400 text-xs"></i>
                  <span class="text-gray-500 text-xs ml-1">4.7 (1800+)</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 商品4 -->
          <div class="product-card bg-white rounded-xl shadow-sm overflow-hidden card-hover" data-category="coffee">
            <div class="relative">
              <img src="https://picsum.photos/seed/heycoffee1/400/300" alt="厚乳拿铁" class="w-full h-48 object-cover">
              <button class="add-to-cart absolute bottom-2 right-2 bg-heytea-green text-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-heytea-darkGreen transition-colors" data-id="4" data-name="厚乳拿铁" data-price="22" data-img="https://picsum.photos/seed/heycoffee1/400/300">
                <i class="fa fa-plus"></i>
              </button>
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-1">厚乳拿铁</h3>
              <p class="text-gray-500 text-sm mb-2 line-clamp-2">精选 espresso 与醇厚牛奶完美融合，口感丝滑，回味悠长。</p>
              <div class="flex items-center justify-between">
                <span class="text-heytea-green font-bold">¥22</span>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400 text-xs"></i>
                  <span class="text-gray-500 text-xs ml-1">4.6 (950+)</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 商品5 -->
          <div class="product-card bg-white rounded-xl shadow-sm overflow-hidden card-hover" data-category="food">
            <div class="relative">
              <img src="https://picsum.photos/seed/heyfood1/400/300" alt="波波冰" class="w-full h-48 object-cover">
              <span class="absolute top-2 left-2 bg-heytea-green text-white text-xs px-2 py-1 rounded-md">热销</span>
              <button class="add-to-cart absolute bottom-2 right-2 bg-heytea-green text-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-heytea-darkGreen transition-colors" data-id="5" data-name="黑糖波波冰" data-price="20" data-img="https://picsum.photos/seed/heyfood1/400/300">
                <i class="fa fa-plus"></i>
              </button>
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-1">黑糖波波冰</h3>
              <p class="text-gray-500 text-sm mb-2 line-clamp-2">浓郁鲜奶冰沙，加入黑糖风味珍珠，顶部撒有黄豆粉。</p>
              <div class="flex items-center justify-between">
                <span class="text-heytea-green font-bold">¥20</span>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400 text-xs"></i>
                  <span class="text-gray-500 text-xs ml-1">4.8 (1500+)</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 商品6 -->
          <div class="product-card bg-white rounded-xl shadow-sm overflow-hidden card-hover" data-category="fruit">
            <div class="relative">
              <img src="https://picsum.photos/seed/heyfruit2/400/300" alt="满杯橙子" class="w-full h-48 object-cover">
              <button class="add-to-cart absolute bottom-2 right-2 bg-heytea-green text-white rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-heytea-darkGreen transition-colors" data-id="6" data-name="满杯橙子" data-price="23" data-img="https://picsum.photos/seed/heyfruit2/400/300">
                <i class="fa fa-plus"></i>
              </button>
            </div>
            <div class="p-4">
              <h3 class="font-semibold text-lg mb-1">满杯橙子</h3>
              <p class="text-gray-500 text-sm mb-2 line-clamp-2">新鲜橙子榨汁，搭配清香绿茶，酸甜爽口，维C满满。</p>
              <div class="flex items-center justify-between">
                <span class="text-heytea-green font-bold">¥23</span>
                <div class="flex items-center">
                  <i class="fa fa-star text-yellow-400 text-xs"></i>
                  <span class="text-gray-500 text-xs ml-1">4.5 (800+)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 加载更多按钮 -->
        <div class="mt-10 text-center">
          <button class="px-6 py-3 border border-heytea-green text-heytea-green rounded-full hover:bg-heytea-lightGreen transition-colors font-medium">
            加载更多 <i class="fa fa-angle-down ml-1"></i>
          </button>
        </div>
      </div>
    </div>
  </main>
  {%endblock%}
